<template>
	<view class="corporateImpression">
		<view class="section">
			<view class="item-section">
				<view class="left">
					<image src="https://ywtmp.hnwytkj.com/static/images/icon1.png" mode=""></image>
					<view>
						<view>企业印象</view>
						<view class="desc">添加公司标签，提升客户印象</view>
					</view>
				</view>
				<!-- <view v-if="info.companyImpression" class="btn active">使用中</view> -->
				<view v-if="modules.includes('companyImpression')" class="btn active">使用中</view>				
				<view v-else class="btn" @tap="addModule('companyImpression')">添加</view>
			</view>
			<view v-if="display" class="item-section">
				<view class="left">
					<image src="https://ywtmp.hnwytkj.com/static/images/icon2.png" mode=""></image>
					<view>
						<view>企业视频</view>
						<view class="desc">添加公司标签，提升客户印象</view>
					</view>
				</view>
				<!-- <view v-if="info.companyVideo" class="btn active">使用中</view> -->
				<view v-if="modules.includes('companyVideo')" class="btn active">使用中</view>	
				<view v-else class="btn" @tap="addModule('companyVideo')">添加</view>
			</view>	
			<view class="item-section">
				<view class="left">
					<image src="https://ywtmp.hnwytkj.com/static/images/icon3.png" mode=""></image>
					<view>
						<view>企业介绍</view>
						<view class="desc">添加公司标签，提升客户印象</view>
					</view>
				</view>
				<!-- <view v-if="info.companyComments" class="btn active">使用中</view> -->
				<view v-if="modules.includes('companyComments')" class="btn active">使用中</view>	
				<view v-else class="btn" @tap="addModule('companyComments')">添加</view>
			</view>	
			<view class="item-section">
				<view class="left">
					<image src="https://ywtmp.hnwytkj.com/static/images/icon4.png" mode=""></image>
					<view>
						<view>图文展示</view>
						<view class="desc">添加公司标签，提升客户印象</view>
					</view>
				</view>
				<!-- <view v-if="info.companyIntroImg" class="btn active">使用中</view> -->
				<view v-if="modules.includes('companyIntroImg')" class="btn active">使用中</view>	
				<view v-else class="btn" @tap="addModule('companyIntroImg')">添加</view>
			</view>	
			<view class="item-section">
				<view class="left">
					<image src="https://ywtmp.hnwytkj.com/static/images/icon5.png" mode=""></image>
					<view>
						<view>企业地址</view>
						<view class="desc">添加公司标签，提升客户印象</view>
					</view>
				</view>
				<!-- <view v-if="info.address" class="btn active">使用中</view> -->
				<view v-if="modules.includes('address')" class="btn active">使用中</view>	
				<view v-else class="btn" @tap="addModule('address')">添加</view>
			</view>	
			<view class="item-section">
				<view class="left">
					<image src="https://ywtmp.hnwytkj.com/static/images/icon6.png" mode=""></image>
					<view>
						<view>我的简介</view>
						<view class="desc">添加公司标签，提升客户印象</view>
					</view>
				</view>
				<!-- <view v-if="info.companyIntro" class="btn active">使用中</view> -->
				<view v-if="modules.includes('companyIntro')" class="btn active">使用中</view>	
				<view v-else class="btn" @tap="addModule('companyIntro')">添加</view>
			</view>	
			<view class="item-section">
				<view class="left">
					<image src="https://ywtmp.hnwytkj.com/static/images/icon7.png" mode=""></image>
					<view>
						<view>我的印象</view>
						<view class="desc">添加公司标签，提升客户印象</view>
					</view>
				</view>
				<!-- <view v-if="info.myImpression" class="btn active">使用中</view> -->
				<view v-if="modules.includes('myImpression')" class="btn active">使用中</view>	
				<view v-else class="btn" @tap="addModule('myImpression')">添加</view>
			</view>	
		</view>
	</view>
</template>

<script>
import http from '@/utils/http.js'
export default {
  data() {
    return {
      title: 'Hello',
	  info: {},
	  modules: [],
	  modulesMap: {
		'企业印象': 'companyImpression',
		'企业视频': 'companyVideo',
		'企业介绍': 'companyComments',
		'图文展示': 'companyIntroImg',
		'企业地址': 'address',
		'我的简介': 'companyIntro',
		'我的印象': 'myImpression',
		'企业雷达': 'companyRadar'
	  },
	  display: 0
    }
  },
  onLoad() {
	  this.getData()
  },
  methods: {
	editInfo() {
	  	uni.navigateTo({
	  		url: '/pages/edit/editEnterpriseInformation'
	  	})
	},
	editCompany() {
	  	uni.navigateTo({
	  		url: '/pagesA/edit/editProfile'
	  	})
	},
	addModule(key) {
		const modules = [...this.modules]
		modules.push(key)
		http({
			url: 'card/user-profile/sort/update',
			method: 'put',
			data: {
				sort: modules.join(',')
			}
		}).then(res => {				
			if(res.code === 0) {				
				// uni.showToast({
				// 	title: '保存成功',
				// 	icon: "success"
				// });
				this.modules = []
				this.getData()
			}
		})
	},
	getData() {
		http({
			url: 'card/user-profile/get'
		}).then(res => {				
			if(res.code === 0) {
				this.display = res.data.display || 0
				// this.info = res.data.companyProfileDO
				// this.sort = res.data.companyProfileDO.sort || ''
				const modules = res.data.companyProfileDO.sort ? (res.data.companyProfileDO.sort.split(',')) : []
				if (modules.includes('companyRadar')) {
					this.modules = modules
				} else {
					this.modules = ['companyRadar'].concat(modules)
				}			
			}
		})		
	}
  },
}
</script>

<style lang="scss" scoped>
	.corporateImpression {
		background: #F0F0F4;
		min-height: 100vh;
		padding-top: 20rpx;
		box-sizing: border-box;
		font-family: PingFang SC;
		.section {
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px #EEEEEE;
			border-radius: 40rpx 40rpx 0 0;
			.item-section {
				height: 168rpx;
				box-shadow: 0px 0px 20rpx 0px #EEEEEE;
				border-radius: 40rpx 40rpx 0 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				padding: 0 30rpx;
				box-sizing: border-box;
				.left {
					display: flex;
					// align-items: center;
					image {
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}
					.desc {
						font-weight: 500;
						font-size: 26rpx;
						color: #999999;
						margin-top: 30rpx;
					}
				}
				.btn {
					width: 150rpx;
					height: 70rpx;
					line-height: 68rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 35rpx;
					border: 1rpx solid #4B73FF;
					font-weight: 500;
					font-size: 28rpx;
					color: #4B73FF;
					box-sizing: border-box;
					&.active {
						background: #E6ECFF;
						border: 0 none;
					}
				}
			}
		}
	}
</style>